<template>
	<view>
		<view class="px-3 flex justify-between align-center" style="height: 44px;">
			<view class="text-center py-1" :class="item.isActive ? 'active' : 'font'"
				v-for="(item,index) in tabs" :key="index" 
				@tap="handlerActive(index)">{{item.value}}</view>
		</view>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		props:{
			tabs:{
				type:Array,
				default:[]
			}
		},
		onReachBottom() {//触底函数
		//当查询到的所有数据总和不超过返回的总数时触发下一页请求
			this.A()
		},
		methods: {
			handlerActive(index){
				this.$emit('tabActive',index)
				
			},
			A(){
				this.$emit('A')
			}
		}
	}
</script>

<style>
.active{
	font-size: 40rpx;
	font-weight: 700;
	color: #17a2b8;
	position: relative;
}
.active::after{
	content: '√';
	font-size: 30rpx;
	position: absolute;
	bottom: 10rpx;
	transform: rotate(20deg);
}

</style>